<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {width: 100px; height: 100px; background-color: #45dfff; margin: 10px;}
	</style>
	<script src="../jquery-1.10.1.min.js"></script>
	<script type="text/javascript">
	/*
		$()下的常用方法:
			stop() : 阻止当前正在进行的运动，执行后续的动作(如果有的话)
			stop(true) : 阻止所有运动
			stop(true, true) : 当前的运动立即到达目标点，并阻止后所有运动(如果有的话)
							第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；
							第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候。
							
			finish() : 立即到达所有的目标点
	*/
	$(function() {
		$('#div2').click(function() {
			$(this).animate({"width": 300},1000,'swing').animate( {"height":300}, 1000, 'swing');
		});

		$('#div1').click(function() {
			// $('#div2').stop();			//立即阻止当前正在进行的运动，执行后续的动作(如果有的话)

			// $('#div2').stop(true);		//立即阻止全部运动

			// $('#div2').stop(true, true);	//当前运动立即到达终点，并停止后续的动作(如果有的话)

			// $('#div2').finish();			//立即到达所有的目标点
		})
	});
	</script>
</head>
<body>
	<div id="div1">stop it</div>
	<div id="div2">move</div>
</body>
</html>